<template>
	<div>

		<BaseHeader></BaseHeader>
		<div>

			<el-table :data="clickRanking" id="ranktable1">
				<el-table-column prop="text" label="热点榜单" id="title" align="center">
					<el-table-column type="index" label="排名" width="60px">
					</el-table-column>
					<el-table-column prop="bookTitle" label="书名">
						<template slot-scope="scope">
							<div>
								<a @click="toBookUrl()" id="bookurl">{{scope.row.bookTitle}}</a>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="bookVisitCount" label="热度">
					</el-table-column>
				</el-table-column>
			</el-table>
			<el-table :data="recommendRanking" id="ranktable2">
				<el-table-column prop="text" label="推荐榜单" id="title" align="center">
					<el-table-column type="index" label="排名" width="60px">
					</el-table-column>
					<el-table-column prop="bookTitle" label="书名">
						<template slot-scope="scope">
							<div>
								<a @click="toBookUrl()" id="bookurl">{{scope.row.bookTitle}}</a>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="bookRecommendCount" label="推荐量">
					</el-table-column>
				</el-table-column>
			</el-table>
			<el-table :data="commentRanking" id="ranktable2">
				<el-table-column prop="text" label="评论榜单" id="title" align="center">
					<el-table-column type="index" label="排名" width="60px">
					</el-table-column>
					<el-table-column prop="bookTitle" label="书名">
						<template slot-scope="scope">
							<div>
								<a @click="toBookUrl()" id="bookurl">{{scope.row.bookTitle}}</a>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="bookCommentCount" label="评论数">
					</el-table-column>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import BaseHeader from "./BaseHeader.vue";
	export default {

		name: 'NovelRanking',
		components: {
			BaseHeader,
		},
		data() {
			return {
				clickRanking: [],
				recommendRanking: [],
				commentRanking: []
			}
		},
		methods: {
			async getVisitCount() {
				const {
					data: result
				} = await this.$http.get('/ranking/clickRanking')
				this.clickRanking = result
			},
			async getRecommendCount() {
				const {
					data: result
				} = await this.$http.get('/ranking/recommendRanking')
				this.recommendRanking = result
			},
			async getcommentCount() {
				const {
					data: result
				} = await this.$http.get('/ranking/commentRanking')
				this.commentRanking = result
			},
			toBookUrl() {
				window.open('http://www.baidu.com')
				/* router.push() */
			}
		},
		mounted() {
			this.getVisitCount()
			this.getRecommendCount()
			this.getcommentCount()
		}
	}
</script>

<style>
	#ranktable1,
	#ranktable2 {
		width: 15% !important;
	}

	#bookurl {
		text-decoration: none;
	}

	#bookurl:hover {
		color: red;
		cursor: pointer;
		text-decoration: underline;
	}
</style>
